<template>
  <div class="my_club_view_box">
    <!-- 全局加载指示器 -->
    <div class="global-loading-wrapper" v-if="loading">
      <div class="global-loading-container">
        <el-progress type="circle" :percentage="Math.floor(loadingPercentage)" :width="80"></el-progress>
        <p class="loading-text">加载中，请稍候...</p>
      </div>
    </div>

    <!-- 顶部信息卡片 -->
    <div class="club-header">
      <div class="club-info">
        <div class="club-avatar">
          <img class="logo" :src="clubInfo.avatar" :alt="clubInfo.title">
        </div>
        <div class="club-meta">
          <h1 class="club-name">{{ clubInfo.title }}</h1>
          <div class="club-details">
            <span class="detail-item">
              <i class="el-icon-date"></i>
              成立于：{{ formatDate(clubInfo.establishDate) }}
            </span>
            <span class="detail-item">
              <i class="el-icon-user"></i>
              部长：{{ this.president.nickname || '暂无部长' }}
            </span>
          </div>
        </div>
        <!-- 添加加入社团按钮 -->
        <div class="join-club-btn" v-if="!isMember && isRecruitmentOpen">
          <el-button 
            type="primary" 
            :loading="joinLoading" 
            @click="handleJoinClub">
            加入社团
          </el-button>
        </div>
        <div class="join-club-btn" v-else-if="joinRequestSent">
          <el-button type="info" disabled>申请已发送</el-button>
        </div>
        <div class="join-club-btn" v-else-if="!isMember && !isRecruitmentOpen">
          <el-button type="info" disabled>未开放招新</el-button>
        </div>
        <!-- 添加退出社团按钮 -->
        <div class="exit-club-btn" v-else-if="isMember && this.president.id !== this.cur_user.id">
          <el-button 
            type="danger" 
            :loading="exitLoading" 
            @click="handleExitClub">
            退出社团
          </el-button>
        </div>
        <!-- 添加收藏按钮 -->
        <div class="favorite-btn">
          <el-button 
            type="text" 
            icon="el-icon-star-on" 
            :class="{'favorited': like}"
            @click="handleFavorite">
            {{ like ? '已收藏' : '收藏' }}
          </el-button>
        </div>
      </div>
      
      <!-- 社团简介 -->
      <div class="club-description">
        <div class="description-header">
          <i class="el-icon-info"></i>
          <span>社团简介</span>
        </div>
        <p class="description-text">{{ clubInfo.description }}</p>
        <div class="tags">
          <el-tag 
            v-for="tag in (clubInfo.tags || '').split(',')" 
            :key="tag" 
            size="small" 
            :type="getTagType(tag)">
            {{ tag }}
          </el-tag>
        </div>
      </div>
      
      <!-- 数据统计卡片 -->
      <div class="club-stats">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ members.length }}</div>
                <div class="stat-label">{{ title }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <i class="el-icon-date"></i>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ activities.length + upcomingActivities.length }}</div>
                <div class="stat-label">活动数量</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon">
                <i class="el-icon-trophy"></i>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ achievements.length }}</div>
                <div class="stat-label">荣誉数量</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon like-icon" @click="handleFavorite">
                <i :class="like ? 'el-icon-star-on' : 'el-icon-star-off'" :style="{ color: like ? '#ff4d4f' : '#1890ff' }"></i>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ clubInfo.favoriteCount }}</div>
                <div class="stat-label">收藏</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="club-content">
      <el-tabs value="first" @tab-click="handleClick" class="custom-tabs">
        <!-- 活动预告 -->
        <el-tab-pane label="活动" name="first">
          <div class="upcoming-activities">
            <div v-for="activity in this.upcomingActivities" :key="activity.id" class="activity-card">
              <div class="activity-time">
                <div class="date">{{ formatDate(activity.begin_data) }}</div>
                <div class="time">{{ formatTime(activity.begin_data) }}</div>
              </div>
              <div class="activity-info">
                <div class="activity-header">
                  <h3>{{ activity.title }}</h3>
                  <el-tag 
                    size="small" 
                    :type="getActivityStatusType(activity)">
                    {{ getActivityStatusText(activity) }}
                  </el-tag>
                </div>
                <p>{{ activity.description }}</p>
                <div class="activity-meta">
                  <span><i class="el-icon-location"></i>{{ activity.location }}</span>
                  <span><i class="el-icon-user"></i>{{ activity.organizer }}</span>
                  <span><i class="el-icon-time"></i>{{ formatDuration(activity.duration) }}</span>
                </div>
              </div>
              <div class="activity-action">
                <el-button 
                  type="primary" 
                  size="small" 
                  round
                  @click="handleSignup(activity.id)"
                  :disabled="isActivityEnded(activity)">
                  {{ isActivityEnded(activity) ? '已结束' : '报名参加' }}
                </el-button>
              </div>
            </div>
            <div v-if="this.upcomingActivities.length === 0" class="empty-activities">
              <i class="el-icon-chat-dot-square"></i>
              <p>暂无活动</p>
            </div>
          </div>
        </el-tab-pane>

        <!-- 历史活动 -->
        <el-tab-pane label="历史活动" name="second">
            <el-table
              :data="activities"
            style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa' }"
            class="custom-table">
            <!-- <el-table-column prop="id" label="ID" width="80"></el-table-column> -->
            <el-table-column prop="activityName" label="活动名称">
              <template slot-scope="scope">
                <div class="activity-name">
                  <i class="el-icon-date"></i>
                  <span>{{ scope.row.activityName }}</span>
                </div>
              </template>
              </el-table-column>
            <el-table-column prop="time" label="活动时间" >
              <template slot-scope="scope">
                <span class="time-text">{{ scope.row.time }}</span>
              </template>
              </el-table-column>
            </el-table>
        </el-tab-pane>

        <!-- 社团成员 -->
        <el-tab-pane label="社团成员" name="third">
          <div class="member-grid">
            <div v-for="member in members" :key="member.id" class="member-card">
              <el-avatar 
                :size="60" 
                :src="member.avatar"
                @error="() => true">
              </el-avatar>
              <h4>{{ member.username }}</h4>
              <p class="member-role">{{ member.role }}</p>
              <div class="member-tags">
                <el-tag size="mini" v-if="member.role === '部长'" type="danger">部长</el-tag>
                <el-tag size="mini" v-else type="info">成员</el-tag>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 社团荣誉 -->
        <el-tab-pane label="社团荣誉" name="fourth">
          <div class="achievements">
            <el-timeline>
              <el-timeline-item
                v-for="achievement in achievements"
                :key="achievement.id"
                :timestamp="achievement.date"
                :type="achievement.type">
                <div class="achievement-card">
                  <h3>{{ achievement.title }}</h3>
                  <p>{{ achievement.description }}</p>
                  <div class="achievement-image" v-if="achievement.image">
                    <img :src="achievement.image" @click="previewImage(achievement.image)">
                  </div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
        <el-tab-pane label="财务管理" name="fifth">
          <el-button type="primary" @click="goToClubManage">财务管理</el-button>
        </el-tab-pane>
        
      </el-tabs>
    </div>
  </div>
</template>

<script>
import httpInstance from '@/utils/http'

export default {
  data() {
    return {
      cur_user: JSON.parse(localStorage.getItem('user') || '{}'),
      president:{},
      loading: false,
      loadingPercentage: 0,
      loadingTimer: null,
      clubId: this.$route.params.id,
      clubInfo: {
        title: '计算机协会',
        description: '计算机协会是一个充满活力的技术社团，致力于培养学生的编程能力和创新思维。我们定期举办算法竞赛、技术讲座和实践项目，帮助成员在计算机科学领域不断成长。',
        avatar: require('@/assets/computer_club_logo.png'),
        establishDate: '2024-01-01',
        memberCount: 50,
        genderRatio: '4:1',
        activityLevel: 85,
        favoriteCount: 520,
        tags: '算法竞赛,技术分享,项目实践,创新思维'
      },
      like: false,
      value1: 85,  // 活跃度
      value2: 50,  // 成员数
      title: "成员数",
      upcomingActivities: [],
      activities: [],
      members: [],
      achievements: [],
      currentUser: JSON.parse(localStorage.getItem('user') || '{}'), // 当前登录用户信息
      presidentName: '', // 添加部长姓名字段
      managedClubs: [], // 管理的社团列表
      isMember: true, // 当前用户是否是社团成员
      joinLoading: false, // 加入按钮加载状态
      joinRequestSent: false, // 是否已经发送加入请求
      isRecruitmentOpen: false, // 社团是否开放招新
      isPresident: false, // 当前用户是否是社团部长
      exitLoading: false, // 退出按钮加载状态
      displayActivities: []
    }
  },
  watch: {
    // 监听路由参数变化
    '$route.params.id': {
      handler(newId) {
        if (newId) {
          this.clubId = newId;
          this.fetchClubData();
        }
      },
      immediate: true
    }
  },
  created() {
    // 移除这里的fetchClubData调用，因为watch中已经设置了immediate: true
  },
  computed: {
    // Process activities based on their status
    displayActivities() {
      return this.activities.map(activity => {
        return {
          ...activity,
          status: this.getActivityStatus(activity)
        };
      });
    }
  },
  methods: {
    // 前往财务管理页面
    goToClubManage(){
      this.$router.push({
        name: 'finance',
        params: { id: this.clubId }
      });
    },

    // 获取所有社团数据
    async fetchClubData() {
      this.loading = true
      this.startLoadingAnimation()
      
      try {
        // 获取社团基本信息
        const clubRes = await httpInstance.get(`/api/club/detail/${this.clubId}`).catch(() => ({ code: 500 }))
        if (clubRes.code === 200) {
          this.clubInfo = {
            ...this.clubInfo,
            ...clubRes.data
          }
          this.value1 = this.clubInfo.activityLevel || 85
          this.value2 = this.clubInfo.memberCount || 50
          // 检查是否已收藏
          await this.checkFavorite()
          // 获取社团招新状态
          this.isRecruitmentOpen = this.clubInfo.recruit === 1
          // 获取社团收藏人数
          await this.fetchCollectionCount()
          this.loadingPercentage = 30
        }

        // 获取活动列表
        const activitiesRes = await httpInstance.get(`/api/club/activities/${this.clubId}`).catch(() => ({ code: 500 }))
        console.log("bug",activitiesRes);
        if (activitiesRes.code === 200 && Array.isArray(activitiesRes.data)) {
          console.log("bug2",activitiesRes.data);
          const allActivities = activitiesRes.data
          // 分离即将开始和历史活动
          const now = new Date()
          // 即将开始的活动
          this.upcomingActivities = allActivities
            .filter(activity => new Date(activity.begin_data) >= now)
            .map(activity => ({
              ...activity,
              date: this.formatDate(activity.begin_data)
            }))
            // 历史活动
          this.activities = allActivities
            .filter(activity => new Date(activity.begin_data) < now)
            .map(activity => ({
              id: activity.id,
              activityName: activity.title,
              time: this.formatDateTime(activity.begin_data, activity.time)
            }))
          this.loadingPercentage = 50
        }

        // 获取成员列表
        const membersRes = await httpInstance.get(`/api/club/members/${this.clubId}`).catch(() => ({ code: 500 }))
        if (membersRes.code === 200 && Array.isArray(membersRes.data)) {
          this.members = membersRes.data.map(member => ({
            id: member.id,
            username: member.nickname,
            avatar: member.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
            role: member.position || '成员',
            isAdmin: member.position === '部长'
          }))
          
          // 更新成员数量为成员列表长度
          this.value2 = this.members.length
          
          // 检查当前用户是否是社团成员
          this.checkMemberStatus()
          this.loadingPercentage = 70
        }

        // 获取荣誉列表
        const achievementsRes = await httpInstance.get(`/api/club/achievements/${this.clubId}`).catch(() => ({ code: 500 }))
        if (achievementsRes.code === 200 && Array.isArray(achievementsRes.data)) {
          console.log(achievementsRes.data);
          this.achievements = achievementsRes.data.map(achievement => ({
            id: achievement.id,
            title: achievement.title,
            description: achievement.description,
            date: this.formatDate(achievement.date),
            type: achievement.type,
            image: achievement.image
          }))
          this.loadingPercentage = 85
        }

        // 获取部长信息
        await this.fetchPresidentInfo()
        
        // 检查加入请求状态
        await this.checkJoinRequestStatus()
        this.loadingPercentage = 100
      } catch (error) {
        console.error('获取社团数据失败:', error)
        this.$message.warning('获取社团数据失败，显示默认数据')
      } finally {
        // 完成加载后稍微延迟关闭loading，提供更好的视觉体验
        setTimeout(() => {
          this.loading = false
          this.stopLoadingAnimation()
        }, 500)
      }
    },
    
    // 启动加载动画
    startLoadingAnimation() {
      this.loadingPercentage = 0
      // 创建一个平滑增加进度的动画效果
      this.loadingTimer = setInterval(() => {
        if (this.loadingPercentage < 90) {
          // 只自动增加到90%，剩余10%留给真正的数据加载完成
          this.loadingPercentage += Math.random() * 3
          if (this.loadingPercentage > 90) {
            this.loadingPercentage = 90
          }
          // 确保loadingPercentage为整数
          this.loadingPercentage = Math.floor(this.loadingPercentage)
        }
      }, 200)
    },
    
    // 停止加载动画
    stopLoadingAnimation() {
      if (this.loadingTimer) {
        clearInterval(this.loadingTimer)
        this.loadingTimer = null
      }
    },
    
    // 检查当前用户是否是社团成员
    checkMemberStatus() {
      if (!this.currentUser.id) {
        this.isMember = false;
        this.isPresident = false;
        return;
      }
      
      // 检查当前用户ID是否在成员列表中
      this.isMember = this.members.some(member => member.id === this.currentUser.id);
      
      // 检查当前用户是否是部长
      this.isPresident = this.members.some(member => 
        member.id === this.currentUser.id && member.role === '部长'
      );
    },
    
    // 检查加入请求状态
    async checkJoinRequestStatus() {
      if (!this.currentUser.id) return
      
      try {
        const res = await httpInstance.get('/api/club/joinRequest/status', {
          params: {
            clubId: this.clubId,
            userId: this.currentUser.id
          }
        }).catch(() => ({ code: 500 }))
        
        if (res.code === 200) {
          this.joinRequestSent = res.data.requested
        }
      } catch (error) {
        console.error('检查加入请求状态失败:', error)
      }
    },
    
    // 处理加入社团请求
    async handleJoinClub() {
      console.log("处理加入社团请求");
      // 查看是否存在当前用户，如果不存在表示没有登录，提示用户去登录
      if (!this.currentUser.id) {
        this.$message.warning('请先登录')
        return
      }
      
      this.joinLoading = true
      
      try {    
        // 给社团部长发送一条消息， 表示要加入社团。
        const res = await httpInstance.post('/api/user/send', {
          type: 3,
          clubId: this.clubId,
          userId: this.currentUser.id,
          from: this.currentUser.id, // 当前用户的id
          to: this.president.id,// 
          content:'<span style="color: red;">' + this.currentUser.nickname + '</span>想加入<span style = "color:red;">' + this.clubInfo.title + '</span>社团，请审核我的申请。' // 申请信息
        }).catch(() => ({ code: 500 }))
        console.log("发送加入请求",res);
        if (res.code === 200) {
          this.$message.success('申请已发送，请等待社团管理员审核')
          this.joinRequestSent = true
        } else {
          this.$message.error(res.message || '申请发送失败，请稍后重试')
        }
      } catch (error) {
        console.error('发送加入请求失败:', error)
        this.$message.error('申请发送失败，请稍后重试')
      } finally {
        this.joinLoading = false
      }
    },

    // 检查是否已收藏
    async checkFavorite() {
      if (!this.currentUser.id) return
      try {
        const res = await httpInstance.post('/api/club/isCollected/' + this.clubId).catch(() => ({ code: 500 }))
        console.log("检查是否已收藏",res);
        if (res.code === 200) {
          this.like = res.data > 0
        }
        
        // 获取社团收藏人数
        await this.fetchCollectionCount()
      } catch (error) {
        console.error('检查收藏状态失败:', error)
      }
    },
    
    // 获取社团收藏人数
    async fetchCollectionCount() {
      try {
        const res = await httpInstance.post('/api/club/collectedNum/' + this.clubId).catch(() => ({ code: 500 }))
        console.log("收藏人数",res);
        if (res.code === 200) {
          this.clubInfo.favoriteCount = res.data
        }
      } catch (error) {
        console.error('获取收藏人数失败:', error)
      }
    },

    // 更新收藏状态
    async handleFavorite() {
      if (!this.currentUser.id) {
        this.$message.warning('请先登录')
        return
      }
      try {
        const res = await httpInstance.post('/api/club/collected/' + this.clubId).catch(() => ({ code: 500 }))
        if (res.code === 200) {
          this.like = !this.like
          this.$message.success(this.like ? '收藏成功' : '取消收藏成功')
          // 刷新收藏人数
          await this.fetchCollectionCount()
        } else {
          this.$message.warning('操作失败，请稍后重试')
        }
      } catch (error) {
        console.error('更新收藏状态失败:', error)
        this.$message.error('操作失败')
      }
    },

    // 活动报名
    async handleSignup(activityId) {
      if (!this.currentUser.id) {
        this.$message.warning('请先登录')
        return
      }
      
      // 跳转到活动详情页面
      this.$message.success('正在前往活动详情页...')
      this.$router.push({
        name: 'ActivityDetail',
        params: { id: activityId }
      })
    },

    // 日期格式化
    formatDate(date) {
      if (!date) return ''
      return new Date(date).toLocaleDateString('zh-CN')
    },

    // 日期时间格式化
    formatDateTime(date, time) {
      if (!date) return ''
      return `${this.formatDate(date)} ${time || ''}`
    },

    // 获取标签类型
    getTagType(tag) {
      const types = {
        '算法竞赛': '',
        '技术分享': 'success',
        '项目实践': 'warning',
        '创新思维': 'danger'
      }
      return types[tag] || ''
    },

    handleClick() {
      // 处理标签页点击
    },

    previewImage(url) {
      // 图片预览
      if (url) {
        const h = this.$createElement
        this.$msgbox({
          title: '预览图片',
          message: h('img', {
            attrs: {
              src: url,
              style: 'width: 100%'
            }
          }),
          showCancelButton: false,
          confirmButtonText: '关闭',
          beforeClose: (action, instance, done) => {
            done()
          },
          customClass: 'image-preview-dialog'
        }).catch(() => {
          // 处理关闭事件
        })
      }
    },

    downloadResource(resource) {
      // 下载资源
    },

    // 获取部长信息
    async fetchPresidentInfo() {
      try {
        const res = await httpInstance.get(`/api/club/president/${this.clubId}`)
        console.log("社长信息", res)
        if (res.code === 200 && res.data) {
          this.president = res.data
        }
      } catch (error) {
        console.error('获取部长信息失败:', error)
      }
    },

    // 获取管理的社团列表
    async fetchManagedClubs() {
      try {
        const res = await httpInstance.get('/api/club/managed')
        if (res.code === 200) {
          this.managedClubs = res.data
        }
      } catch (error) {
        console.error('获取管理的社团列表失败:', error)
        this.$message.error('获取社团列表失败')
      }
    },

    // 获取职位标签类型
    getPositionTagType(position) {
      const types = {
        '部长': 'danger',
        '副部长': 'warning',
        '组长': 'success',
        '干事': 'info'
      }
      return types[position] || ''
    },

    // // 跳转到社团管理页面
    // goToClubManage(clubId) {
    //   this.$router.push(`/club/${clubId}/manage`)
    // },

    // 查看社团详情
    viewClubDetails(clubId) {
      this.$router.push(`/club/${clubId}`)
    },

    // 处理退出社团请求
    async handleExitClub() {
      if (!this.currentUser.id) {
        this.$message.warning('请先登录');
        return;
      }
      
      // 二次确认
      try {
        await this.$confirm('确定要退出该社团吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
      } catch (e) {
        // 用户取消
        return;
      }
      
      this.exitLoading = true;
      
      try {
        // 发送退出社团请求
        const res = await httpInstance.post('/api/user/send', {
          type: 5, // 使用类型5表示退出社团请求
          clubId: this.clubId,
          userId: this.currentUser.id,
          from: this.currentUser.id,
          to: this.president.id,
          content: `<span style="color: red;">${this.currentUser.nickname}</span>申请退出<span style="color:red;">${this.clubInfo.title}</span>社团。`
        });
        
        if (res.code === 200) {
          this.$message.success('退出申请已发送，请等待社团管理员确认');
          // 可以选择立即更新UI状态或等待后端确认
          // this.isMember = false;
        } else {
          this.$message.error(res.message || '申请发送失败，请稍后重试');
        }
      } catch (error) {
        console.error('发送退出请求失败:', error);
        this.$message.error('申请发送失败，请稍后重试');
      } finally {
        this.exitLoading = false;
      }
    },

    // Get activity status (not started, in progress, ended)
    getActivityStatus(activity) {
      const now = new Date();
      const startTime = new Date(activity.begin_data);
      
      // Calculate end time by adding duration (in minutes)
      const endTime = new Date(startTime.getTime() + activity.duration * 60 * 1000);
      
      if (now < startTime) {
        return 'not_started';
      } else if (now >= startTime && now <= endTime) {
        return 'in_progress';
      } else {
        return 'ended';
      }
    },
    
    // Get display text for activity status
    getActivityStatusText(activity) {
      const status = this.getActivityStatus(activity);
      switch (status) {
        case 'not_started': return '未开始';
        case 'in_progress': return '进行中';
        case 'ended': return '已结束';
        default: return '未知状态';
      }
    },
    
    // Get tag type for activity status
    getActivityStatusType(activity) {
      const status = this.getActivityStatus(activity);
      switch (status) {
        case 'not_started': return 'primary';
        case 'in_progress': return 'success';
        case 'ended': return 'info';
        default: return '';
      }
    },
    
    // Check if activity has ended
    isActivityEnded(activity) {
      const status = this.getActivityStatus(activity);
      return status === 'ended';
    },
    
    // Format date from ISO string to display date
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN');
    },
    
    // Format time from ISO string to display time
    formatTime(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
    },
    
    // Format duration (minutes) to hours and minutes
    formatDuration(minutes) {
      if (!minutes && minutes !== 0) return '未知时长';
      
      const hours = Math.floor(minutes / 60);
      const mins = minutes % 60;
      
      if (hours > 0 && mins > 0) {
        return `${hours}小时${mins}分钟`;
      } else if (hours > 0) {
        return `${hours}小时`;
      } else {
        return `${mins}分钟`;
      }
    }
  },
  // 组件销毁前清除定时器
  beforeDestroy() {
    this.stopLoadingAnimation()
  }
}
</script>

<style scoped>
/* 全局加载样式 */
.global-loading-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  backdrop-filter: blur(5px);
}

.global-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.loading-text {
  margin-top: 15px;
  font-size: 16px;
  color: #409EFF;
  font-weight: 500;
}

.my_club_view_box {
  width: 90%;
  margin: 40px auto;
  min-height: calc(100vh - 120px);
}

.club-header {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.club-info {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.club-avatar {
  margin-right: 30px;
}

.logo {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

.club-meta {
  flex: 1;
}

.club-name {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.club-details {
  display: flex;
  gap: 24px;
}

.detail-item {
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-item i {
  color: #1890ff;
}

.club-description {
  margin-top: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
}

.description-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #1890ff;
  font-size: 16px;
  font-weight: 500;
}

.description-text {
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
}

.tags {
  display: flex;
  gap: 8px;
}

.club-stats {
  margin-top: 20px;
}

.stat-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon i {
  font-size: 24px;
  color: #1890ff;
}

.like-icon {
  cursor: pointer;
}

.like-icon i {
  color: #ff4d4f;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  line-height: 1.2;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.club-content {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.custom-tabs {
  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
    background-color: #f0f0f0;
  }

  :deep(.el-tabs__item) {
    font-size: 16px;
    color: #666;
    padding: 0 24px;
    height: 48px;
    line-height: 48px;
  }

  :deep(.el-tabs__item.is-active) {
    color: #1890ff;
    font-weight: 500;
  }
}

.custom-table {
  margin-top: 16px;

  :deep(.el-table__header-wrapper) {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }

  :deep(.el-table__body-wrapper) {
    border-radius: 0 0 8px 8px;
    overflow: hidden;
  }
}

.activity-name, .member-name, .notice-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-name i, .member-name i, .notice-title i {
  color: #1890ff;
  font-size: 16px;
}

.time-text {
  color: #666;
  font-size: 14px;
}

.upcoming-activities {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.activity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.activity-time {
  text-align: center;
  margin-right: 24px;
  min-width: 80px;
}

.date {
  font-size: 20px;
  font-weight: 600;
  color: #1890ff;
}

.time {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.activity-info {
  flex: 1;
}

.activity-info h3 {
  margin: 0 0 8px 0;
  color: #333;
}

/* 添加活动头部样式 */
.activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.activity-header h3 {
  margin: 0;
  flex: 1;
}

.activity-header .el-tag {
  margin-left: 10px;
}

.activity-info p {
  color: #666;
  margin: 0 0 12px 0;
}

.activity-meta {
  display: flex;
  gap: 16px;
  color: #666;
  font-size: 14px;
}

.activity-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.activity-action {
  margin-left: 24px;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.member-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.member-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.member-card h4 {
  margin: 12px 0 4px 0;
  color: #333;
  font-size: 16px;
}

.member-role {
  color: #409EFF;
  font-size: 14px;
  font-weight: 500;
  margin: 8px 0;
}

.member-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.achievements {
  padding: 20px 0;
}

.achievement-card {
  background: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.achievement-card h3 {
  margin: 0 0 8px 0;
  color: #333;
}

.achievement-card p {
  color: #666;
  margin: 0 0 12px 0;
}

.achievement-image {
  margin-top: 12px;
}

.achievement-image img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.achievement-image img:hover {
  transform: scale(1.05);
}

.resources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.resource-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.resource-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.resource-icon i {
  font-size: 24px;
  color: #1890ff;
}

.resource-info {
  flex: 1;
}

.resource-info h3 {
  margin: 0 0 4px 0;
  color: #333;
}

.resource-info p {
  color: #666;
  font-size: 14px;
  margin: 0 0 8px 0;
}

.resource-meta {
  display: flex;
  gap: 16px;
  color: #666;
  font-size: 13px;
}

.resource-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.resource-action {
  margin-left: 16px;
}

.club-management {
  padding: 20px 0;
}

.club-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.club-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.club-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.club-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
}

.club-avatar {
  margin-right: 16px;
  border: 2px solid #f0f2f5;
}

.club-info {
  flex: 1;
}

.club-title {
  margin: 0 0 4px 0;
  font-size: 18px;
  color: #333;
}

.club-position {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.club-stats-row {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
  border-top: 1px solid #f0f2f5;
  border-bottom: 1px solid #f0f2f5;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.stat-item i {
  color: #1890ff;
  font-size: 18px;
}

.club-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.club-card-actions .el-button {
  padding: 8px 20px;
}

.club-card-actions .el-button--text {
  color: #666;
}

.club-card-actions .el-button--text:hover {
  color: #1890ff;
}

/* 响应式布局调整 */
@media screen and (max-width: 768px) {
  .club-list {
    grid-template-columns: 1fr;
  }
  
  .club-card {
    padding: 16px;
  }
  
  .club-title {
    font-size: 16px;
  }
}

.join-club-btn {
  margin-left: auto;
  align-self: flex-start;
}

.join-club-btn .el-button {
  padding: 12px 25px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  border: none;
  box-shadow: 0 8px 15px rgba(75, 108, 183, 0.2);
  transition: all 0.3s ease;
  border-radius: 25px;
}

.join-club-btn .el-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 20px rgba(75, 108, 183, 0.3);
}

.join-club-btn .el-button[disabled] {
  background: linear-gradient(135deg, #9aa8cc 0%, #5c698f 100%);
  opacity: 0.7;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .club-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .join-club-btn {
    margin-left: 0;
    margin-top: 15px;
    width: 100%;
  }
  
  .join-club-btn .el-button {
    width: 100%;
  }
  
  .favorite-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    margin-left: 0;
  }
}

.favorite-btn {
  margin-left: 15px;
  align-self: flex-start;
}

.favorite-btn .el-button {
  transition: all 0.3s ease;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.favorite-btn .el-button i {
  font-size: 18px;
  color: #909399;
}

.favorite-btn .el-button.favorited i {
  color: #ff4d4f;
}

.favorite-btn .el-button:hover {
  transform: scale(1.05);
}

.favorite-btn .el-button:hover i {
  color: #ff4d4f;
}

/* 修改活动状态标签的样式 */
.status-tag-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  height: 100%; /* 确保容器填满单元格高度 */
}

.el-tag {
  margin: 0; /* 重置外边距 */
}

.exit-club-btn {
  margin-left: 15px;
  align-self: flex-start;
}

.exit-club-btn .el-button {
  padding: 12px 25px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(135deg, #f56c6c 0%, #c0392b 100%);
  border: none;
  box-shadow: 0 8px 15px rgba(245, 108, 108, 0.2);
  transition: all 0.3s ease;
  border-radius: 25px;
}

.exit-club-btn .el-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 20px rgba(245, 108, 108, 0.3);
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .exit-club-btn {
    margin-left: 0;
    margin-top: 15px;
    width: 100%;
  }
  
  .exit-club-btn .el-button {
    width: 100%;
  }
}

.empty-activities {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #909399;
}

.empty-activities i {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-activities p {
  font-size: 16px;
}

.activity-card {
  margin-bottom: 15px;
  transition: transform 0.3s;
}

.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.activity-meta span {
  margin-right: 20px;
}

.activity-meta i {
  margin-right: 5px;
}
</style>
